<template>
	<view>
		<view class="head-box">
			<!-- 登录卡片 -->
			<view class="head-box-bottom">
				<view class="enter-box">
					<view class="enter-box-top">
						<view class="enter-box-image">
							<image :src="userInfo.avatarUrl || userInfo.avatar" style="width: 120rpx;height: 120rpx;"
								mode="" v-if="userInfo"></image>
							<image src="@/static/my/entry.png" style="width: 120rpx;height: 120rpx;" mode="" v-else>
							</image>
						</view>
						<view class="enter-box-card">
							<view class="card-name">
								<!-- <text>登录</text> -->
								<view v-if="userInfo">{{userInfo.username}}</view>
								<button v-else size="mini" plain="true" @click="getUserProfile"> 注册/登录 </button>
							</view>
							<view class="card-description" v-if="!userInfo">
								<text>注册/登录后即可体验更多服务</text>
								<u-icon name="arrow-right" color=" #B3B5B9;"></u-icon>
							</view>
						</view>
					</view>
					<view class="enter-box-bottom" v-if="userInfo">
						<view class="bottom-box" @click="jumpPage('/subPackages/my-publish/my-publish')">
							<view class="bottom-num">
							</view>
							<view class="bottom-text">
								<text>我的发布 {{userInfo.myPublishCount?('：'+userInfo.myPublishCount) : ''}}</text>
							</view>
						</view>
						<!-- 竖条 -->
						<view class="between-box"></view>
						<view class="bottom-box" @click="jumpPage('/subPackages/collect/collect')">
							<view class="bottom-num">
							</view>
							<view class="bottom-text">我的收藏{{userInfo.myCollectionCount?('：'+userInfo.myCollectionCount) : ''}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="suggest" @click="gotosuggest">向我砸意见吧(☆_☆)</view>
	</view>
</template>

<script>
	// import {mapActions} from '../../store/index.js'
	export default {
		data() {
			return {
				userInfo: null,
				isNew: true,
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			// 去提意见
			gotosuggest(){
				uni.navigateTo({
					url:'../../subPackages/suggest/suggest'
				})
			},
			// 获取用户昵称和头像
			getUserProfile(e) {
				wx.getUserProfile({
					desc: '用于获取个人资料', // 这里的desc在微信开发文档中要求必须填写的
					success: (res) => {
						let registerInfo = res.userInfo
						if (getApp().globalData.userInfo === null) {
							this.regist(registerInfo)
						} else {
							this.$login()
							uni.$nextTick(() => {
								this.getInfo()
							})
						}

					}
				})
			},
			// 注册
			regist(registerInfo) {
				uni.request({
					url: getApp().globalData.URL + '/user/register?openid=' + getApp().globalData.openid +
						'&username=' + registerInfo.nickName + '&avatar=' + registerInfo.avatarUrl,
					method: 'post',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.data === 1) {
							uni.showToast({
								title: '注册成功！'
							})
							uni.login({
								success: (res) => {
									if (res.errMsg === 'login:ok') {
										let code = res.code
										uni.request({
											url: getApp().globalData.URL+'/user/login',
											method: 'post',
											data: {
												code: code
											},
											header: {
												'Content-Type': 'application/x-www-form-urlencoded'
											},
											success: (res) => {
												let that = this
												let session = res.data.session_key
												uni.setStorage({
													key: 'session',
													data: res.data.session_key
												})
												this.$getUserInfo()
												this.getInfo()
												uni.getStorage({
													key: 'session',
													success: function(res) {
														console.log(res)
													}
												})
											},
										})
									}
								}
							})
						}
					},
					fail: (error) => {
						uni.showToast({
							icon: error,
							title: '注册失败！'
						})
					}
				})
			},
			// 页面跳转
			jumpPage(path) {
				uni.navigateTo({
					url: path
				})
			},
			getInfo() {
				let session
				uni.getStorage({
					key: 'session',
					success: (res) => {
						session = res.data
						if (session ) {
							uni.request({
								url: getApp().globalData.URL + '/user/getUserInfo',
								method: 'post',
								header: {
									'Content-Type': 'application/x-www-form-urlencoded',
									'session': session
								},
								success: (res) => {
									try {
										this.userInfo = res.data
									} catch (e) {}
								}
							})
						}
					},
					fail: () => {}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head-box {
		background-color: #3c9cff;
		box-sizing: border-box;

		.head-box-top {
			display: flex;
			height: 48rpx;

			.top-text {
				width: 242rpx;
				height: 48rpx;
				text-align: center;
				margin-left: 204rpx;
				font-size: 34rpx;
				line-height: 48rpx;
				color: #F9F9F9;
			}
		}

		.head-box-bottom {
			height: 176rpx;
			position: relative;

			.enter-box {
				position: absolute;
				top: 40rpx;
				left: 32rpx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				width: 686rpx;
				height: 316rpx;
				border-radius: 16rpx;
				box-shadow: 0 4rpx 14rpx #EFECEC;

				.enter-box-top {
					width: 100%;
					height: 190rpx;
					box-sizing: border-box;
					display: flex;

					.enter-box-image {
						width: 120rpx;
						height: 120rpx;
						box-sizing: border-box;
						margin: 40rpx
					}

					.enter-box-card {
						.card-name {
							margin-top: 52rpx;
							font-size: 36rpx;
							line-height: 50rpx;

							button {
								border: none;
								padding: 0;
							}
						}

						.card-description {
							display: flex;
							font-size: 24rpx;
							line-height: 34rpx;
							margin-top: 12rpx;
						}
					}
				}

				.enter-box-bottom {
					width: 100%;
					height: 126rpx;
					display: flex;
					box-sizing: border-box;

					.between-box {
						width: 2rpx;
						height: 74rpx;
						background-color: #F2F2F2;
						margin-top: 20rpx;
					}

					.bottom-box {
						width: 50%;
						text-align: center;

						.bottom-num {
							font-size: 32rpx;
							line-height: 44rpx;
							color: #2B333F;
						}

						.bottom-text {
							font-size: 32rpx;
							line-height: 90rpx;
							color: #AEB8C6;
						}
					}
				}
			}
		}
	}

	.account-box {
		height: 112rpx;
		margin-top: 164rpx;
		display: flex;
		position: relative;

		.account-text {
			margin: 32rpx;
			color: #2B333F;
			font-size: 34rpx;
			line-height: 48rpx;
		}

		.account-icon {
			position: absolute;
			right: 42rpx;
			bottom: 42rpx;
		}
	}
	.suggest{
		margin: 120px 20px 0px 20px;
		padding: 15px;
		// border: 1px solid #DCDFE6;
		color:#5a5a5a;
		border-radius: 4px;
		box-shadow: 0 4rpx 14rpx #EFECEC;
		
	}
</style>
